<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<el-tabs
			slot="topTab"
			v-model="queryData.type"
			@tab-click="typeChangeHandle"
		>
			<el-tab-pane :label="$t('member.member')" name="1"></el-tab-pane>
			<el-tab-pane :label="$t('agent.agent')" name="2"></el-tab-pane>
		</el-tabs>
		<template slot="query">
			<el-form
				ref="queryForm"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="$t('common.choose_merchant') + ':'"
					prop="merchantId"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantInfoA"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="$t('system.parameter_dictionary.module') + ':'"
					class="flex-row-container"
					label-width="55px"
				>
					<el-select
						v-model="queryData.module"
						clearable
						:placeholder="$t('common.all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in sysMsgModuleType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item :label="$t('common.status') + ':'">
						<el-select
							v-model="queryData.status"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option :label="$t('funds.enable')" :value="1"></el-option>
							<el-option :label="$t('funds.disable')" :value="0"></el-option>
						</el-select>
					</el-form-item> -->

				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset()"
					>
						{{ $t('common.reset') }}
					</el-button>
					<!-- <el-button
							v-if="hasPermission('502031')"
							type="warning"
							icon="el-icon-folder"
							:disabled="loading"
							size="medium"
							@click="Add"
						>
							{{ $t('common.add') }}
						</el-button> -->
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="list"
				highlight-current-row
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
			>
				<el-table-column
					prop="module"
					align="center"
					:label="$t('system.parameter_dictionary.module')"
					width="150px"
				>
					<template slot-scope="scope">
						<span v-if="scope.row.type == 1">
							{{
								typeFilter(
									scope.row.module,
									'sysMsgMemberModule'
								)
							}}
						</span>
						<span v-else>
							{{
								typeFilter(
									scope.row.module,
									'sysMsgProxyModule'
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					align="left"
					:label="$t('operation.notice_config.notice_title')"
					min-width="150px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ $t('common.zh') }}：{{ scope.row.title || '-' }}
						</span>
						<!--<p v-if="scope.row.titleEn">
									{{ $t('common.en') }}：{{
										scope.row.titleEn || '-'
									}}
								</p>
								<p v-if="scope.row.titleTh">
									{{ $t('common.th') }}：{{
										scope.row.titleTh || '-'
									}}
								</p>
								<p v-if="scope.row.titleVi">
									{{ $t('common.vn') }}：{{
										scope.row.titleVi || '-'
									}}
								</p>-->
					</template>
				</el-table-column>
				<el-table-column
					align="left"
					:label="$t('operation.activity_notice.notice_content')"
					min-width="400px"
				>
					<template slot-scope="scope">
						<el-tooltip
							v-if="scope.row.content.length > 45"
							class="item"
							effect="dark"
							placement="top"
						>
							<div class="tooltip-content" slot="content">
								{{ $t('common.zh') }}：{{
									scope.row.content || '-'
								}}
							</div>
							<div class="tooltip-trigger">
								{{ scope.row.content }}
							</div>
						</el-tooltip>
						<span v-else>
							{{ $t('common.zh') }}：{{
								scope.row.content || '-'
							}}
						</span>
						<!--<p v-if="scope.row.contentEn">
									{{ $t('common.en') }}：{{
										scope.row.contentEn || '-'
									}}
								</p>
								<p v-if="scope.row.contentTh">
									{{ $t('common.th') }}：{{
										scope.row.contentTh || '-'
									}}
								</p>
								<p v-if="scope.row.contentVi">
									{{ $t('common.vn') }}：{{
										scope.row.contentVi || '-'
									}}
								</p>-->
					</template>
				</el-table-column>
				<!-- <el-table-column
						prop="status"
						align="center"
						:label="$t('common.status')"
						width="100px"
					>
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status == 1" type="success">
								{{ $t('funds.enable') }}
							</el-tag>
							<el-tag v-else type="danger">{{ $t('funds.disable') }}</el-tag>
						</template>
					</el-table-column> -->
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.last_updateBy')"
					width="150px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.last_updateAt')"
					width="160px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="operating"
					align="center"
					:label="$t('common.actions')"
					width="200px"
				>
					<template slot-scope="scope">
						<!-- <el-button
								v-if="scope.row.status === 0 && hasPermission('502051')"
								slot="reference"
								size="small"
								link
								type="success"
								@click="useChannel(scope.row)"
							>
								{{ $t('funds.enable') }}
							</el-button>
							<el-button
								v-if="scope.row.status === 1 && hasPermission('502051')"
								slot="reference"
								size="small"
								link
								type="danger"
								@click="disableChannel(scope.row)"
							>
								{{ $t('funds.disable') }}
							</el-button> -->
						<el-button
							v-if="hasPermission('502052')"
							type="primary"
							size="medium"
							@click="Edit(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="$t('common.edit')"
			:visible.sync="dialogFormVisible"
			:destroy-on-close="true"
			:width="getWidth('700px')"
			center
			@close="clear"
		>
			<el-form
				ref="formSub"
				:inline="true"
				:model="dialogForm"
				:rules="dataRule"
				:label-width="getWidth('100px')"
			>
				<el-form-item
					:label="$t('system.parameter_dictionary.module') + ':'"
					class="tagheight"
				>
					<el-input
						v-if="dialogForm.type == 1"
						:value="
							typeFilter(dialogForm.module, 'sysMsgMemberModule')
						"
						disabled
					></el-input>
					<el-input
						v-else
						:value="
							typeFilter(dialogForm.module, 'sysMsgProxyModule')
						"
						disabled
					></el-input>
				</el-form-item>
				<h4 style="text-align:center">
					{{ $t('operation.notice_config.notice_title') }}
				</h4>
				<el-form-item
					:label="$t('common.zh') + ':'"
					class="tagheight"
					prop="title"
				>
					<el-input
						v-model="dialogForm.title"
						:placeholder="$t('common.please_enter')"
						clearable
						type="textarea"
						show-word-limit
						v-input="{ name: 'noEmpty' }"
						:maxlength="100"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
						v-if="filterLanguages('en_US')"
						:label="$t('common.en') + ':'"
						class="tagheight"
						prop="titleEn"
					>
						<el-input
							v-model="dialogForm.titleEn"
							:placeholder="$t('common.please_enter')"
							clearable
							type="textarea"
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('th_TH')"
						:label="$t('common.th') + ':'"
						class="tagheight"
						prop="titleTh"
					>
						<el-input
							v-model="dialogForm.titleTh"
							:placeholder="$t('common.please_enter')"
							clearable
							type="textarea"
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('vi_VN')"
						:label="$t('common.vn') + ':'"
						class="tagheight"
						prop="titleVi"
					>
						<el-input
							v-model="dialogForm.titleVi"
							:placeholder="$t('common.please_enter')"
							clearable
							type="textarea"
						></el-input>
					</el-form-item> -->
				<h4 style="text-align:center">
					{{ $t('operation.activity_notice.notice_content') }}
				</h4>
				<el-form-item
					:label="$t('common.zh') + ':'"
					class="tagheight"
					prop="content"
				>
					<el-input
						v-model="dialogForm.content"
						:placeholder="$t('common.please_enter')"
						clearable
						type="textarea"
						show-word-limit
						:maxlength="2000"
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
						v-if="filterLanguages('en_US')"
						:label="$t('common.en') + ':'"
						class="tagheight"
						prop="contentEn"
					>
						<el-input
							v-model="dialogForm.contentEn"
							:placeholder="$t('common.please_enter')"
							clearable
							type="textarea"
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('th_TH')"
						:label="$t('common.th') + ':'"
						class="tagheight"
						prop="contentTh"
					>
						<el-input
							v-model="dialogForm.contentTh"
							:placeholder="$t('common.please_enter')"
							clearable
							type="textarea"
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('vi_VN')"
						:label="$t('common.vn') + ':'"
						class="tagheight"
						prop="contentVi"
					>
						<el-input
							v-model="dialogForm.contentVi"
							:placeholder="$t('common.please_enter')"
							clearable
							type="textarea"
						></el-input>
					</el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					type="primary"
					:loading="loading"
					@click="subAddOrEidt"
				>
					{{ $t('common.save') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { mapGetters } from 'vuex'
import MainContent from '@/components/MainContent/index.vue'
export default {
	name: 'SysNotice',
	components: { MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: ['wrap'],
			memberValidErrorMsg: this.$t('operation.input_tips1'),
			loading2: false,
			queryData: {
				type: '1',
				merchantId: undefined,
				status: undefined,
				module: undefined
			},
			dialogFormVisible: false,
			dialogForm: {
				merchantId: undefined,
				module: undefined,
				status: undefined,
				contentVi: '',
				contentTh: '',
				contentEn: '',
				content: '',
				objDetail: '',
				titleVi: '',
				titleTh: '',
				titleEn: '',
				title: ''
			},
			recordId: '',
			userList: [],
			pageD: 1,
			sizeD: 10,
			summary: 0,
			merchantInfoA: {
				languages: 'zh_CN'
			}
		}
	},
	computed: {
		...mapGetters(['merchantInfo']),
		blackStatusType() {
			return this.globalDics.blackStatusType || []
		},
		sysMsgModuleType() {
			const emeu = {
				'1': this.globalDics.sysMsgMemberModule || [],
				'2': this.globalDics.sysMsgProxyModule || []
			}
			return emeu[this.queryData.type]
		},
		loginDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		userTypes() {
			return [
				{
					code: '1',
					description: this.$t('operation.specific_member')
				},
				{
					code: '0',
					description: this.$t('operation.all_member')
				}
			]
		},
		sendObjTypes() {
			// return this.globalDics.loginDeviceType || []
			return [
				{ code: '1', description: this.$t('operation.member') },
				{ code: '2', description: this.$t('operation.device') }
			]
		},
		dataRule() {
			return {
				title: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips5'),
						trigger: 'blur'
					}
				],
				titleEn: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips5'),
						trigger: 'blur'
					}
				],
				titleTh: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips5'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				titleVi: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips5'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				content: [
					{
						required: true,
						message: `${this.$t('common.please_enter')}${this.$t(
							'operation.activity_notice.notice_content'
						)}`,
						trigger: 'blur'
					}
				],
				contentEn: [
					{
						required: true,
						message: `${this.$t('common.please_enter')}${this.$t(
							'operation.activity_notice.notice_content'
						)}`,
						trigger: 'blur'
					}
				],
				contentTh: [
					{
						required: true,
						message: `${this.$t('common.please_enter')}${this.$t(
							'operation.activity_notice.notice_content'
						)}`,
						trigger: 'blur'
					}
				],
				contentVi: [
					{
						required: true,
						message: `${this.$t('common.please_enter')}${this.$t(
							'operation.activity_notice.notice_content'
						)}`,
						trigger: 'blur'
					}
				],
				sendObj: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'blur'
					}
				],
				merchantId: [
					{
						required: true,
						message: this.$t('operation.please_choose_merchant'),
						trigger: ['blur', 'change']
					}
				]
			}
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
		}
		this.loadData()
	},
	methods: {
		typeChangeHandle() {
			this.reset(this.queryData.type)
		},
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		handleMerchantIdChange(e) {
			// this.dialogForm.contentVi = ''
			// this.dialogForm.contentTh = ''
			// this.dialogForm.contentEn = ''
			// this.dialogForm.content = ''
			// this.$refs.formSub.clearValidate([
			// 	'contentVi',
			// 	'contentTh',
			// 	'contentEn',
			// 	'content'
			// ])
		},
		filterLanguages(lang) {
			return this.merchantInfoA?.languages
				? this.merchantInfoA?.languages?.indexOf(lang) !== -1
				: false
		},
		loadData() {
			const params = {
				...this.getParams(this.queryData)
			}
			this.list = []
			this.loading = true
			this.$api
				.getOperateSysMsgList(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}

					const _list = record.map((item) => {
						return {
							...item
							// title: this.filterLanguages('zh_CN')
							// 	? item.title
							// 	: '',
							// titleEn: this.filterLanguages('en_US')
							// 	? item.titleEn
							// 	: '',
							// titleTh: this.filterLanguages('th_TH')
							// 	? item.titleTh
							// 	: '',
							// titleVi: this.filterLanguages('vi_VN')
							// 	? item.titleVi
							// 	: '',
							// content: this.filterLanguages('zh_CN')
							// 	? item.content
							// 	: ''
							// contentEn: this.filterLanguages('en_US')
							// 	? item.contentEn
							// 	: '',
							// contentTh: this.filterLanguages('th_TH')
							// 	? item.contentTh
							// 	: '',
							// contentVi: this.filterLanguages('vi_VN')
							// 	? item.contentVi
							// 	: ''
						}
					})

					this.list = _list || []
					this.total = totalRecord || 0

					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset(type = '1') {
			this.queryData = {
				module: undefined,
				merchantId: undefined,
				status: undefined,
				type: this.queryData.type
			}
			if (!this.$store.getters.isZk) {
				this.queryData.merchantId = this.$store.getters.merchantInfo.id
			}
			this.pageNum = 1
			this.loadData()
		},
		Edit(row) {
			this.dialogForm = JSON.parse(JSON.stringify(row))
			this.dialogFormVisible = true
			this.$nextTick(() => {
				this.$refs.formSub.clearValidate()
			})
		},
		subAddOrEidt() {
			const params = {
				...this.dialogForm
			}
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.loading = true
					this.$api
						.setOperateSysMsgList(params)
						.then((res) => {
							this.loading = false
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.action_success')
								)
								this.dialogFormVisible = false
								this.loadData()
							}
						})
						.catch((e) => {
							this.loading = false
						})
				}
			})
		},
		useChannel(row) {
			const str = `<strong>${this.$t(
				'funds.thirdPeymentChannelConfig.use_channel_tip1'
			)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
				'funds.thirdPeymentChannelConfig.disable_channel_tip2'
			)}</span>`

			this.$confirm(str, this.$t('common.success_tip'), {
				dangerouslyUseHTMLString: true,
				confirmButtonText: this.$t('common.confirm'),
				cancelButtonText: this.$t('common.cancel'),
				type: 'warning'
			})
				.then(() => {
					this.$api
						.setStatusOperateSysMsg({
							id: row.id,
							status: 1
						})
						.then((res) => {
							this.$message({
								message: this.$t(
									'funds.thirdPeymentChannelConfig.use_success_tip'
								),
								type: 'success'
							})
							this.loadData()
						})
				})
				.catch(() => {})
		},
		disableChannel(row) {
			const str = `<strong>${this.$t(
				'funds.thirdPeymentChannelConfig.disable_channel_tip1'
			)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
				'funds.thirdPeymentChannelConfig.disable_channel_tip2'
			)}</span>`

			this.$confirm(str, this.$t('common.success_tip'), {
				dangerouslyUseHTMLString: true,
				confirmButtonText: this.$t('common.confirm'),
				cancelButtonText: this.$t('common.cancel'),
				type: 'warning'
			})
				.then(() => {
					this.$api
						.setStatusOperateSysMsg({
							id: row.id,
							status: 0
						})
						.then((res) => {
							if (res.code === 200) {
								this.$message({
									message: this.$t(
										'funds.thirdPeymentChannelConfig.disable_success_tip'
									),
									type: 'success'
								})
								this.loadData()
							}
						})
				})
				.catch(() => {})
		},
		clear() {
			this.$refs.formSub.resetFields()
		},
		filterTerminal(val) {
			const arr = val ? val.split(',') : []
			if (arr.length) {
				return arr
					.map((item) => this.typeFilter(item, 'clientType'))
					.join(',')
			}
			return '-'
		},
		joinDeviceTypeArr() {
			const arr = []
			this.loginDeviceType.forEach((item) => {
				arr.push(item.description)
			})
			return arr.length ? arr.join(',') : '-'
		},
		_getSerialNum(index) {
			return (this.pageD - 1) * this.sizeD + index + 1
		}
	}
}
</script>

<style lang="scss" scoped>
.tooltip-content {
	width: 250px;
}
.tooltip-trigger {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
	border: 1px solid #dddddd;
}
::v-deep .tagheight {
	.el-form-item__content,
	.el-select {
		width: 480px;
	}
}
::v-deep .el-tabs__item {
	font-size: 17px;
}
.decoration {
	// text-decoration: underline;
	cursor: pointer;
	color: #4b7902;
}
.fenye {
	text-align: center;
}
</style>
<style>
.el-tooltip__popper {
	max-width: 300px !important;
}
</style>
